<template>
  <div id="opponentAccount">
    <div class="homeTitle">交易对手详情</div>
    <div class="tablelist">
        <el-form class="formlist" :model="formData"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList" :key="item.label" :label="item.label" :prop="item.prop">
                      <template>{{formData[item.prop] ? formData[item.prop] : 0}}</template>
                    </el-form-item>
           </el-form>
    </div>
    <div class="oppTitle">选择账户</div>
    <div class="bottomTable">
      <div class="table">
        <table>
          <tr>
            <td>业务类型</td>
            <td>账户名称</td>
            <td>开户银行</td>
            <td>账号</td>
            <td>支付系统行号</td>
            <td>当前状态</td>
            <td>操作</td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{item.type}}</td>
            <td>{{item.accountName}}</td>
            <td>{{item.openBank}}</td>
            <td>{{item.number}}</td>
            <td>{{item.payment}}</td>
            <td>{{item.state == 1 ? '有效' : '失效'}}</td>
            <td>
              <el-button type="primary" size="small" @click="selectRow(item.id)">选中</el-button>
            </td>
          </tr>
        </table>
        <div class="addwhite">
          <span @click="addAccout">+ 点击添加账户信息</span>
        </div>
      </div>
    </div>
    <div class="close">
      <el-button type="primary" size="small" @click="close">关闭</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "opponentAccount",
  data() {
    return {
     
      formList: [
        {label: '交易对手编号', prop: 'counterpartyNum', value:''},
        {label: '机构标识', prop: 'identification', value:''},{label: '同业标识', prop: 'mark', value:''},
        {label: '交易机构类型', prop: 'type', value:''},{label: '交易机构简称', prop: 'simple', value:''},
        {label: '交易机构法人代表', prop: 'userName', value:''},{label: '联系电话', prop: 'phone', value:''},
        {label: '金融许可证', prop: 'licence', value:''},{label: '交易机构组织机构代码', prop: 'code', value:''},
        {label: '交易机构统一社会信用代码', prop: 'creditCode', value:''},{label: '交易机构地址', prop: 'address', value:''},
        {label: '传真', prop: 'fax', value:''},{label: '交易机构邮编', prop: 'mechanismCode', value:''},
        {label: '统一授信额度', prop: 'creditLine', value:''},{label: '当前可用额度', prop: 'available', value:''}
      ],
      formData: {},
      tableData: [],
      oppoName: '',
      rules:{}
    };
  },
  created() {
    this.getOpponnentInfo()
  },
  methods: {
    close () {
      this.$router.go(-1);
    },
    addAccout () {
      this.$router.push({path: 'bondExchange', query: {oppoName: this.oppoName}});
    },
    getOpponnentInfo() {
      let data = {
        id: this.$route.query.id
      }
      this.axios.get('counterparty/selectOne', {params:data}).then((res) => {
        this.formData = res.data.data.counterparty
        this.tableData = res.data.data.accountList
        this.oppoName = res.data.data.counterparty.full
      })
    },
    selectRow(id) {
      // 交易对手id  账户ID
      sessionStorage.setItem('counterpartyId', this.$route.query.id)
      sessionStorage.setItem('counterpartyAccountId', id)
      this.$router.go(-2)
    }
  }
};
</script>

<style lang="scss">
.el-form-item__error{
  z-index: 99;
}
#opponentAccount {
  .tablelist {
    margin-top: 30px;
      .el-form-item{
        width:98%;
        margin:0;
        border: 1px solid white;
        border-bottom: none;
        .el-form-item__label, .el-form-item__content{
            padding: 6px 0px;
            // border-right: 1px solid white;
        }
        .el-form-item__label{
          text-align: center;
            width:35%;
            background: #2f3638;
            color:white;
        }
        .el-form-item__content{
          width:65%;
          text-align: center;
          color: white;
          background: rgba(53,58,58,0.75);
          
        }
      }
  }
  .oppTitle {
    color: white;
    margin: 20px 0;
  }
  .bottomTable {
    table {
      border: 1px solid white;
      width: 100%;
      border-collapse: collapse;
      tr {
        &:first-child {
          background-color:rgba(53, 58, 58, 0.75);
          color: white;
          td {
            background-color: rgba(53, 58, 58, 0.55)
          }
        }
        td {
          text-align: center;
          padding: 10px 10px;
          border-right: 1px solid white;
          border-bottom: 1px solid white;
          color: white;
          background: rgba(53, 58, 58, 0.55)
        }
    }
    }
    .addwhite {
      height: 46px;
      background-color: white;
      padding: 0 20px;
      span {
        color: #cccccc;
        line-height: 46px;
      }
    }
  }
  .close {
    margin-top: 30px;
    text-align: center;
  }
}
</style>
